<template>
    <div class="charts-box">
        <div ref="ChartsRef" style="height:100%"></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref,reactive,onMounted } from "vue";
import { collectApi } from "../../apis/homeApi";

    let ChartsRef = ref()
    onMounted(async function () {
            /**创建饼图实例*/
        const pieChart = echarts.init(ChartsRef.value)
        let result = await collectApi()
        if (result.code === 200) {
            loopRenderPieChart(pieChart, result.data)
        }
    })
    function loopRenderPieChart(pieChart,arr,index = 0){
        let item = arr[index]
        const option = {
            tooltip: {
                trigger: 'item'
            },
            title: {
                left: '60%',
                top: 'center'
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['合计', '已收', '未收']
            },
                series: [
                    {
                    type: 'pie',
                    color: [
                        '#ffc069',
                        '#ed7b2f',
                        '#f9e0c7'
                    ],
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 3,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: item.total, name: '合计',color:'#ffc069' },
                            { value: item.received, name: '已收' },
                            { value: item.receiving, name: '未收' },
                        ]
                    }
                ]
            };
            /**绘制chart图 */
        pieChart.setOption(option)
        setTimeout(function(){
            if(index>7){
                index=0
            }else{
                ++index
            }
            loopRenderPieChart(pieChart,arr,index)
        },4000)
    }
    
</script>
<style lang="less">
    @import '../../style/common.less';
    .charts-box{
        display: block;
        position: relative;
        background: @b00;
        width: 100%;
        height: 150px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

</style>